/* eslint-disable */
import echarts from "echarts/lib/echarts";
import Chart from "echarts-for-react/lib/core";
import react from 'react'
// 柱状图
const pieData = {
  data: [
    { value: 12, name: '机关' },
    { value: 20, name: '学校' },
    { value: 18, name: '企业' },
    { value: 18, name: '社区' },
    { value: 10, name: '家庭' },
    { value: 4, name: '商场' },
    { value: 3, name: '宾馆' },
    { value: 2, name: '其他' },
  ],
  legendData: { '机关': { ratio: '14.1%' }, '学校': { ratio: '23.5%' }, '企业': { ratio: '21.2%' }, '社区': { ratio: '18.8%' }, '家庭': { ratio: '11.8%' }, "商场": { ratio: '4.7%' }, '宾馆': { ratio: '3.5%' }, "其他": { ratio: '2.4%' } }
};

const xDataBar = ['1月', '2月', '3月', '4月', '5月', '6月'];
let barData = [10, 9, 52, 73, 92, 38];

class LeftChartBar extends react.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  componentDidMount() {

    //获取图表实例
    let echarts_instance = this.echarts_reactLeftBar.getEchartsInstance();
    //给图表注册点击事件
    echarts_instance.on('click', function (params) {
      // console.log(params.name)
      this.props.onLeftChartBar(params)
      // console.log(params)

    }.bind(this));
  }


  setOption = () => {
    return {
      color: ["#00DEFF", "#46CC92"],
      title: {
        text: '每月细胞数',
        left: '42%',
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      grid: {
        top: 30,
        left: 10,
        right: 20,
        bottom: 10,
        containLabel: true
      },
      tooltip: { trigger: "axis" },
      xAxis: {
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { color: "#fff" },
        data: xDataBar
      },
      yAxis: {
        name: '',
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { lineStyle: { color: "#fff" } },
        axisLabel: { color: "#fff" }
      },
      series: [
        {
          
          type: "bar",
          data:pieData.data,
          barWidth: 16,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(0,222,255,1)" },
                { offset: 1, color: "rgba(29,87,117,1)" }
              ]),
              barBorderRadius: [2, 2, 0, 0]
            }
          }
        },
      ]
    }
  }


  render() {
    return (
      <div className="situational-detail">
        <Chart
          echarts={echarts}
          option={this.setOption()}
          notMerge
          lazyUpdate
          style={{ height: 150 }}
          ref={(e) => { this.echarts_reactLeftBar = e; }}
        />
      </div>
    )
  }

}
export default LeftChartBar;